<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工列表</title>
</head>
<body>
<input type="text" id="name" placeholder="请输入员工姓名">
<input type="text" id="salary" placeholder="请输入员工工资">
<input type="text" id="job" placeholder="请输入员工岗位">
<button onclick="add()">添加员工</button>
<hr>
<table border="1">
    <caption>员工表</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>工资</th>
            <th>岗位</th>
        </tr>
    </thead>
</table>
<script>
    let arr=[];/*员工数组，将来可保存到数据库中*/
    function add(){
        let tableE = document.querySelector('table');
        let tr = document.createElement('tr');
        let td1 = document.createElement('td');
        let td2 = document.createElement('td');
        let td3 = document.createElement('td');

        let name = document.getElementById('name').value;
        let salary = document.getElementById('salary').value;
        let job = document.getElementById('job').value;
        if(name==''||salary==''||job==''){
            alert('内容不能为空');
            return;
        }

        tableE.append(tr);
        tr.append(td1);
        tr.append(td2);
        tr.append(td3);
        td1.append(name);
        td2.append(salary);
        td3.append(job);
        /*数据添加到数组*/
        arr.push({
            name:name,
            salary:salary,
            job:job
        })
        console.log(arr);
        /*成功添加后清空数据*/
        document.getElementById('name').value='';
        document.getElementById('salary').value='';
        document.getElementById('job').value='';

    }
</script>
</body>
</html>